<template>
  <!--评估页面 -->
  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="3" />
    </el-header>
    <el-main>
      <div
        style="display: flex; flex-direction: row; width: 100%; height: 100%"
      >
        <div
          style="
            height: 100%;
            width: 80%;
            display: flex;
            flex-direction: column;
          "
        >
          <div
            style="
              height: 50%;
              width: 100%;
              padding-top: 20px;
              position: relative;
            "
          >
            <div
              style="
                text-align: left;
                font-size: 30px;
                font-weight: bold;
                color: #fff;
                position: absolute;
                top: 8px;
                left: 5px;
                width: 100%;
                z-index: 1000;
              "
            >
              抗定位之前
              <userinfo :info ="otherInfo" />
            </div>
            <!-- <testMap ref="testMap" class="testMap" :darkblue="true" @markerClick="markerHandle"></testMap> -->
            <b-map
              class="testMap"
              v-if="center"
              :height="'100%'"
              :width="'100%'"
              ref="testMap"
              :center="center"
            ></b-map>
          </div>
          <div
            style="
              height: 50%;
              width: 100%;
              padding-top: 20px;
              position: relative;
            "
          >
            <div
              style="
                text-align: left;
                font-size: 30px;
                font-weight: bold;
                color: #fff;
                position: absolute;
                top: 5px;
                left: 5px;
                width: 100%;
                z-index: 1000;
              "
            >
              抗定位之后
            </div>

            <!-- <testMap1 ref="testMap1" class="testMap1" :darkblue="true" @markerClick="markerHandle"></testMap1> -->
            <b-map1
              class="testMap1"
              v-if="center"
              :height="'100%'"
              :width="'100%'"
              ref="testMap1"
              :center="center"
            ></b-map1>
          </div>
        </div>
        <div
          style="
            height: 100%;
            width: 20%;
            padding-top: 20px;
            position: relative;
          "
        >
          <!--          <img v-show="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="hiddenClass"-->
          <!--               @click="hideRightModel">-->
          <!--          <img v-show="!rightModelShow" :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="showClass"-->
          <!--               @click="showRightModel">-->
          <div v-show="rightModelShow" class="home-model-right">
            <div class="infoModel">
              <div class="infoTitle flex-container">
                用户位置泄露风险统计
                <el-button type="text" @click="toalarmInformation" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                <barchart />
              </div>
            </div>

            <div class="infoModel">
              <div class="infoTitle flex-container">
                用户位置泄露风险告警
                <!-- 跳转终端页面 -->
                <el-button type="text" @click="toalarmInformation" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                <list-scroll class="box" :speed="0">
                  <div class="list">
                    <div
                      class="infoItem1"
                      v-for="(item, index) in infoList"
                      :key="index"
                      @click="clickalarm(item)"
                    >
                      <div class="_num">
                        {{ index + 1 }}
                      </div>
                      <div class="_cont">
                        {{ item.username }}---{{ item.locationPos }}
                      </div>
                    </div>
                  </div>
                </list-scroll>
              </div>
            </div>

            <div class="infoModel">
              <div class="infoTitle flex-container">
                用户抗定位任务列表
                <!-- 跳转终端页面 -->
                <el-button type="text" @click="toantiLocalization" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                <list-scroll class="box" :speed="0">
                  <div class="list">
                    <div
                      class="infoItem2"
                      v-for="(item, index) in infoList2"
                      :key="index"
                      @click="clickanti(item)"
                    >
                      <div class="_num">
                        {{ index + 1 }}
                      </div>
                      <div class="_cont">
                        {{ item.method }}---{{ item.state }}---{{
                          item.targetLocation
                        }}
                      </div>
                    </div>
                  </div>
                </list-scroll>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/views/largeScreen/components/header/index.vue";
// import testMap from "./components/amap.vue";
// import testMap1 from "./components/amap1.vue";
import { detailsInfo, listWarn } from "@/api/combatUser/alarmInformation";
import {
  listTask,
  detailsuserlocationInfo,
} from "@/api/combatUser/antiLocalization";
import Dialog from "@/views/xd/components/dialog/dialog.vue";
import barchart from "./components/3DColumnChart2.vue";
// import userifm from "@/views/xd/components/dialog/userInformation.vue";
import userinfo from "./components/userInformation.vue";

import ListScroll from "@/components/DtSrcollCopy2";
import * as echarts from "echarts";
import { detailsUserId } from "@/api/combatUser/importantUser";
import BMap from "./components/bmap.vue";
import BMap1 from "./components/bmap1.vue";

export default {
  components: {
    Header,
    Dialog,
    ListScroll,
    barchart,
    // userifm,
    BMap,
    BMap1,
    userinfo,
  },
  data() {
    return {
      userInfoData: {},
      otherInfo: {},
      rightModelShow: true,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [],
      infoList2: [],

      infoHeight: 300,
      scrollTop: 0,
      center: null,
    };
  },
  async mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    //从请求的地址中获取id
    this.id = this.$route.query.warnid;
    //通过ID获取用户信息
    let res = await detailsInfo(this.id);
    if (res.code == 200) {
      this.userInfoData = res.data;
    }
    //通过id调用另一个接口获取原来的位置信息
    let res2 = await detailsUserId(this.userInfoData.userid);
    if (res2.code == 200) {
      this.otherInfo = res2.data;
    }
    //获取所有的告警列表
    let listWarnRes = await listWarn({ pageNum: 1, pageSize: 30 });
    if (listWarnRes.code == 200) {
      this.infoList = listWarnRes.rows;
    }

    //用户抗定位任务列表
    let listWarnRes2 = await listTask({ pageNum: 1, pageSize: 30 });
    if (listWarnRes2.code == 200) {
      this.infoList2 = listWarnRes2.rows;
    }
    let { userWorkLat, userWorkLon, userHomeLat, userHomeLon } = this.otherInfo;
    let { locationLat, locationLon } = this.userInfoData;

    // 获取抗定位坐标
    let id = this.$route.query.id;
    let antiLocalization = await detailsuserlocationInfo(id);
    let { resultLat, resultLon, targetLocation } = antiLocalization.data;

    this.center = { lng: locationLon, lat: locationLat };
    this.$nextTick(() => {
      this.$refs.testMap.setData({
        points: [
          {
            lng: locationLon,
            lat: locationLat,
            color: "red",
            params: { name: "定位地址", ...this.userInfoData },
          },
          {
            lng: userHomeLon,
            lat: userHomeLat,
            color: "blue",
            params: {
              name: "家庭地址",
              ...this.userInfoData,
              radius: 30000,
              radiusFlag: true,
            },
          },
          {
            lng: userWorkLon,
            lat: userWorkLat,
            color: "yellow",
            params: { name: "工作地址", radius: 30000, radiusFlag: true },
          },
        ],
      });
      let todata = {
        name: "定位地址",
        ...this.userInfoData,
        locationPos: targetLocation,
        locationLon: resultLon,
        locationLat: resultLat,
      };
      this.$refs.testMap1.setData({
        points: [
          {
            lng: resultLon,
            lat: resultLat,
            color: "red",
            params: { name: "定位地址", ...todata },
          },
          {
            lng: userHomeLon,
            lat: userHomeLat,
            color: "blue",
            params: {
              name: "家庭地址",
              ...this.userInfoData,
              radius: 30000,
              radiusFlag: true,
            },
          },
          {
            lng: userWorkLon,
            lat: userWorkLat,
            color: "yellow",
            params: { name: "工作地址", radius: 30000, radiusFlag: true },
          },
        ],
      });
    });
  },
  methods: {
    markerHandle(data) {
      console.log("地图返回的数据", data);
      this.markerInfoData = data;
      this.markerInfoShow = true;
    },
    toantiLocalization() {
      this.$router.push("/networkUser/antiLocalization");
    },
    toalarmInformation() {
      this.$router.push("/networkUser/alarmInformation");
    },
    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 5;
      this.leftModelSpan = 19;
    },

    onSubmit() {},

    // 点击用户位置列表
    clickalarm(row) {
      this.$router.push(
        "/userPositioningScreen/details?id=" + row.id + "&userid=" + row.userid
      );
    },
    // 点击用户定位列表
    async clickanti(row) {
      // this.$router.push({path: '/userPositioningScreen/compare?id='+row.id+'&warnid='+row.warnid})
      console.log("清空地图", row);
      this.$refs.testMap.clearOverlays();
      this.$refs.testMap1.clearOverlays();
      this.id = row.warnid;
      //通过ID获取用户信息
      let res = await detailsInfo(this.id);
      if (res.code == 200) {
        this.userInfoData = res.data;
      }
      //通过id调用另一个接口获取原来的位置信息
      let res2 = await detailsUserId(this.userInfoData.userid);
      if (res2.code == 200) {
        this.otherInfo = res2.data;
      }
      //获取所有的告警列表
      let listWarnRes = await listWarn({ pageNum: 1, pageSize: 30 });
      if (listWarnRes.code == 200) {
        this.infoList = listWarnRes.rows;
      }

      //用户抗定位任务列表
      let listWarnRes2 = await listTask({ pageNum: 1, pageSize: 30 });
      if (listWarnRes2.code == 200) {
        this.infoList2 = listWarnRes2.rows;
      }
      let { userWorkLat, userWorkLon, userHomeLat, userHomeLon } =
        this.otherInfo;
      let { locationLat, locationLon } = this.userInfoData;
      let id = row.id;
      let antiLocalization = await detailsuserlocationInfo(id);
      console.log("抗定位坐标", antiLocalization);
      let { resultLat, resultLon, targetLocation } = antiLocalization.data;

      this.center = { lng: locationLon, lat: locationLat };
      this.$nextTick(() => {
        this.$refs.testMap.setData({
          points: [
            {
              lng: locationLon,
              lat: locationLat,
              color: "red",
              params: { name: "定位地址", ...this.userInfoData },
            },
            {
              lng: userHomeLon,
              lat: userHomeLat,
              color: "blue",
              params: {
                name: "家庭地址",
                ...this.userInfoData,
                radius: 30000,
                radiusFlag: true,
              },
            },
            {
              lng: userWorkLon,
              lat: userWorkLat,
              color: "yellow",
              params: { name: "工作地址", radius: 30000, radiusFlag: true },
            },
          ],
        });
        let todata = {
          name: "定位地址",
          ...this.userInfoData,
          locationPos: targetLocation,
          locationLon: resultLon,
          locationLat: resultLat,
        };
        this.$refs.testMap1.setData({
          points: [
            {
              lng: resultLon,
              lat: resultLat,
              color: "red",
              params: { name: "定位地址", ...todata },
            },
            {
              lng: userHomeLon,
              lat: userHomeLat,
              color: "blue",
              params: {
                name: "家庭地址",
                ...this.userInfoData,
                radius: 30000,
                radiusFlag: true,
              },
            },
            {
              lng: userWorkLon,
              lat: userWorkLat,
              color: "yellow",
              params: { name: "工作地址", radius: 30000, radiusFlag: true },
            },
          ],
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home-model-right {
  border-radius: 5px;
  padding: 5px;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .infoModel {
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 48px;
      box-sizing: border-box;
    }
  }
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.body {
  font-size: 18px;
  position: absolute;
  top: 60px;
  right: 10px;
  padding: 8px;
  color: #90cee9;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.Dialog1 {
  position: absolute;
  left: 100px;
  top: 200px;
  width: 420px;
  height: 250px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: 1px;
  text-align: left;
  font-style: normal;
  text-align: center;
  font-weight: bold;
}

.Tc1 {
  position: absolute;
  top: 10px;
  left: 30px;
  width: 400px;
  height: 250px;
}

.Tc2 {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 400px;
  height: 300px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.scroll-div {
  margin-top: 10px;
  overflow: hidden;
  animation: scroll 1s linear infinite;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 18px;
}

.home-model-right .infoModel .infoTitle {
  z-index: 1;
}

.infoList {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-div {
  position: absolute;
  width: 100%;
  bottom: -1px;
  margin-top: 10px;
  overflow: hidden;
  border-top-left-radius: 30px;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.zindexModel {
  position: absolute;
  background-color: #153968a6;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.rightJ {
  z-index: 1000;
}

.section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid black;
  background-image: url("~@/assets/xd/xd-bg3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.chart-container {
  width: 100%;
  height: 300px;
}

button {
  margin-bottom: 10px;
}

.zindexModel {
  position: absolute;
  background-color: #153968a6;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hiddenClass {
  height: 100%;
  position: absolute;
  right: 400px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}

.showClass {
  height: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}
</style>
